<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="MaMa热搜"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 热搜内容 -->
    <div class="content">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell @click="detail(item)" v-for="item in list" :key="item.id">
          <template #title>
            <span class="num" :class="{top: item.id<4,down: item.id>3}">{{item.id}}</span>
            <div class="name van-ellipsis">{{item.name}}</div>
            <!-- 备注 -->
            <span class="remark">{{item.remark}}</span>
          </template>
          <template #right-icon>
            <van-tag type="danger" v-if="item.tag == '新'">新</van-tag>
            <van-tag type="warning" v-if="item.tag == '热'">热</van-tag>
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      loading: false,
      finished: false,
      list:[{
        id: 1,
        name: '怎么控糖，血糖偏高的人什么时候开始用药物控糖',
        remark: '当前高热',
        tag: '新'
      },{
        id: 2,
        name: '哪些糖尿病患者不适合运动或只能做极轻微的运动？',
        remark: '3287463',
        tag: '热'
      },{
        id: 3,
        name: '1型糖尿病和2型糖尿病，哪个更严重？',
        remark: '824637',
        tag: '新'
      },{
        id: 4,
        name: '吃粗粮会不会影响肠胃',
        remark: '343249',
        tag: '新'
      },
      {
        id: 5,
        name: '两大神器，西红柿与黄瓜',
        remark: '32424',
        tag: '热'
      },
      {
        id: 6,
        name: '最近的减肥情况',
        remark: '3244',
        tag: ''
      },
      {
        id: 7,
        name: '延长就餐时间,会不会较大影响餐后血糖上升',
        remark: '3224',
        tag: ''
      }]
    }
  },
  methods:{
    detail(){

    },
    onClickLeft() {
      // Toast('返回');
      this.$router.go(-1)
    },
    onLoad() {
      // 异步更新数据

      // 触底,发送请求,每次请求10条,请求数据添加到list,加载状态结束,直到全部加载完

      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1);
      //   }

      //   // 加载状态结束
      this.loading = false;

      //   // 数据全部加载完成
        if (this.list.length != 0) {
          this.finished = true;
        }
      // }, 1000);
    },
  }
}
</script>
<style lang="less" scoped>
@font-face {
  font-family: "ZoomlaHaihunhou-A055"; /*逐浪海昏侯汉简隶书*/
  src: url("https://code.z01.com/font/ZoomlaHaihunhou-A055.eot?#iefix"); /* IE9 */
  src: url("https://code.z01.com/font/ZoomlaHaihunhou-A055.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("https://code.z01.com/font/ZoomlaHaihunhou-A055.woff")
      format("woff"),
    /* chrome、firefox */
      url("https://code.z01.com/font/ZoomlaHaihunhou-A055.ttf")
      format("truetype"),
    /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
      url("https://code.z01.com/font/ZoomlaHaihunhou-A055.svg#ZoomlaHaihunhou-A055")
      format("svg"); /* iOS 4.1- */
  font-style: normal;
  font-weight: normal;
}
.content{
  .name{
    max-width: 65%;
    display: inline-block;
    vertical-align: top;
  }
  .num{
    display: inline-block;
    width: 25px;
    text-align: center;
    font-family: "ZoomlaHaihunhou-A055";
    font-style: italic;
    // margin: 0 4px;
    // font-size: 1.2rem;
    // color: #e64e2a;
    // font-weight: 600;
  }
  .top{
    font-size: 1.2rem;
    color: #e64e2a;
    font-weight: 600;
  }
  .down{
    font-size: 1rem;
    color: #e6822a;
    // font-weight: 600;
  }
  .remark{
    display: inline-block;
    font-size: 0.7rem;
    color: #969799;
    margin-left: 10px;
  }
  .van-tag{
    font-size: 0.7rem;
    width: 10px;
    height: 18px;
    margin-top: 2px;
  }
}
</style>